<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            //思路：获取元素  绑定监听  改变相关内容

            // 获取四个按钮
            var add = document.querySelector("#add");
            var copy = document.querySelector("#copy");
            var remove = document.querySelector("#remove");
            var replace = document.querySelector("#replace");

            //绑定监听
            add.onclick = function () {
                //创建节点对象
                var img = document.createElement("img");//<img>
                //为节点对象设置相关属性
                img.setAttribute("src", "imgs/2.png");
                img.setAttribute("width", "150px");
                img.setAttribute("height", "100px");

                //节点对象的追加 添加到页面上 语法:父元素.添加的方法()
                document.body.appendChild(img);//末尾追加

                //添加div 文字666
                var div = document.createElement("div");
                var textNode = document.createTextNode("666");//创建文本节点
                div.appendChild(textNode);//将文字添加到div
                document.body.appendChild(div);
            }

            copy.onclick = function () {
                //获取图片
                var pic = document.querySelector("#pic");
                //复制图片对象
                var newNode = pic.cloneNode(false);//参数表示是否复制完成的子孙节点

                //将复制元素追到到父元素之前 通过父元素将新节点插入到某节点前
                //参数1 新节点  参数2 已经存在节点
                document.body.insertBefore(newNode, pic);


            }
            remove.onclick = function () {
                //获取图片
                var pic = document.querySelector("#pic");
                document.body.removeChild(pic);

            }
            replace.onclick = function () {
                //创建节点对象
                var img = document.createElement("img");//<img>
                //为节点对象设置相关属性
                img.setAttribute("src", "imgs/2.png");
                img.setAttribute("width", "150px");
                img.setAttribute("height", "100px");

                //获取图片
                var pic = document.querySelector("#pic");
                document.body.replaceChild(img, pic);


            }

        }
    </script>
</head>

<body>

    <input type="button" value="添加" id="add">
    <input type="button" value="复制" id="copy">
    <input type="button" value="删除" id="remove">
    <input type="button" value="替换" id="replace">
    <br>
    <hr>

    <img src="imgs/1.png" style="width: 150px; height: 100px;" id="pic">


</body>

</html>